import React, { Component } from 'react';
import { connect } from 'dva';

// import { formatMessage, FormattedMessage } from 'umi/locale';
// import GridContent from '@/components/PageHeaderWrapper/GridContent';
import classNames from 'classnames';
import { Empty, Modal, Layout, Row, Col, Icon, Button, notification, Drawer } from 'antd';
// import moment from 'moment';
// 引入 ECharts 主模块
// import echarts from 'echarts';

import styles from './Home.less';
import RadarChart from '../../components/Echart/RadarChart';
import DoubleLineChart from '../../components/Echart/DoubleLineChart';
import LineBarChart from '../../components/Echart/LineBarChart';
// import ContentPage from '@/components/ContentPage';
// import LineChart from '../../components/Echart/LineChart';
// import getUrlParam from '@/utils/getUrlParam';
// const { Header, Content, Footer } = Layout;

// @connect(({ chart, loading }) => ({
//   chart,
//   loading: loading.effects['chart/fetch'],
// }))

// const customizeRenderEmpty = () => (
//   <div style={{ textAlign: 'center' }}>
//     <Icon type="smile" style={{ fontSize: 20 }} />
//     <p>暂无数据</p>
//   </div>
// );

class Home extends Component {
  constructor(props) {
    super(props);
  }

  state = {
    radarChartName: 'radarChart',
    evaluateWeekChartName: 'evaluateWeekChart',
    eInteractionChartName: 'eInteractionChart',
    valueChangeChartName: 'LineChart',

    showDetail: false,

    ViedoVisible: false,
    currentVideoUrl: 'http://video.cfbond.com/APPkhdspym/fbh/55611955.shtml?jy',

    radarChartStyle: {
      width: '100%',
      height: '280px',
      marginTop: '10px',
    },

    lineChartStyle: {
      width: '100%',
      height: '290px',
      marginTop: '10px',
    },

    name: '董书广测试_11',
    email_server: 'smtp.163.com',
    email: 'dongshuguang_1993@163.com',
    password: '123',
    relation_account_id: 'b6408464-f2e3-11e8-992f-acde48001122',

    customize: true,
    visible: false,
  };

  // openNotification = (url) => {
  //   console.log("url",url)
  //   notification.open({
  //     message: 'Notification Title',
  //     description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  //     style: {
  //       width: 600,
  //       marginLeft: 335 - 600,
  //     },
  //   });
  // };

  openVideoPage = url => {
    // console.log(url);
    this.setState({
      currentVideoUrl: url,
      ViedoVisible: true,
    });
  };

  closeVideoPage = () => {
    this.setState({
      ViedoVisible: false,
    });
  };

  onContentClose = () => {
    this.setState({ visible: false });
  };

  componentDidMount() {
    const { dispatch } = this.props;
    const videoType = [
      {
        name: '23276',
        type: '精选',
      },
      {
        name: '23277',
        type: '首席论市',
      },
      {
        name: '23278',
        type: '财富连线',
      },
      {
        name: '23279',
        type: '大咖面对面 ',
      },
      {
        name: '23280',
        type: '投资课堂',
      },
      {
        name: '23281',
        type: '财经热榜',
      },
      {
        name: '23283',
        type: 'V视频 ',
      },
      {
        name: '23284',
        type: '大咖讲坛 ',
      },
      {
        name: '232861',
        type: '证监会发布',
      },
      {
        name: '232862',
        type: '银行发布会',
      },
      {
        name: '23287',
        type: '政策解读',
      },
      {
        name: '23563',
        type: 'English',
      },
      {
        name: '23564',
        type: '艺述说',
      },
      {
        name: '23711',
        type: '热点直击',
      },
      {
        name: '23552',
        type: '相关推荐',
      },
      {
        name: '24148',
        type: '汽车',
      },
      {
        name: '21643',
        type: '走进私募',
      },
    ];
    // console.log('LOGIN_INFO', sessionStorage.getItem('LOGIN_INFO'));

    // 经营预警
    dispatch({
      type: 'home/getJyyj',
      payload: {},
    });

    // 合规预警
    dispatch({
      type: 'home/getHgyj',
      payload: {
        api_type: 'industry',
      },
    });

    // 舆情预警
    dispatch({
      type: 'home/getYqyj',
      payload: {
        sensitive_type: '2',
        similar_merge: '1',
      },
    });

    dispatch({
      type: 'home/getFsan',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
      },
    });
    dispatch({
      type: 'home/getFdaw',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
      },
    });
    dispatch({
      type: 'home/getEiaw',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
      },
    });

    // 新闻视频
    dispatch({
      type: 'home/getHmlp',
      payload: {},
    });
  }

  render() {
    const {
      FSAbnormal,
      FinancialDataAbnormal,
      exoticIndexAbnormal,
      videoSelcet,
      HgyjData,
      YqyjData,
      JyyjData,
    } = this.props;
    const { customize } = this.state;
    // console.log('YqyjData', YqyjData.data_list);

    let renderYQYJ = data => {
      let Content = [];
      if (data) {
        for (let i = 0; i < data.length; i++) {
          Content.push(
            <p
              key={`yqyj-${i}`}
              className={classNames(styles.yqyjTitle, i % 2 ? styles.banma : '')}
            >
              {data[i].title}
            </p>
          );
          // console.log('data', data[i].title);
        }
      }
      return Content;
    };

    let renderSecond = (data, index) => {
      let Content = [];
      if (data && data.length > 0 && index == 1) {
        // console.log(data);

        for (let i = 0; i < data.length; i++) {
          Content.push(
            <p key={`renderSeconds-${i}`}>
              <span style={{ marginRight: '5px' }}>•</span>
              <span className={classNames(styles.financialTitle, styles.marginRight5)}>
                {data[i].first_item_name}:
              </span>
              <span className={classNames(styles.firstfinancialDesc, styles.marginRight10)}>
                {data[i].first_item_value}
              </span>
              <span className={classNames(styles.financialTitle, styles.marginRight5)}>
                {data[i].second_item_name}:
              </span>
              <span className={classNames(styles.firstfinancialDesc, styles.marginRight5)}>
                {data[i].second_item_value}
              </span>
            </p>
          );
          // console.log('data', data[i].title);
        }
      } else {
        for (let i = 0; i < data.length; i++) {
          Content.push(<p key={`renderSecond-${i}`}>{data[index]}</p>);
          // console.log('data', data[i].title);
        }
      }
      return Content;
    };

    let renderJYYJ = data => {
      let Content = [];
      if (data) {
        for (let i = 0; i < data.length; i++) {
          Content.push(
            <div key={`jyyj-${i}`}>
              <p className={styles.financialP}>【{data[i].item_name}】</p>
              {renderSecond(data[i].item_value, i)}
              {/* {data.item_value.length>0 && data.item_value.map((item,index)=>{
                {item}
              })} */}
            </div>
          );
          // console.log('data', data[i].title);
        }
      }
      return Content;
    };

    let showDetail = () => {
      this.setState({ showDetail: true });
    };

    return (
      // <Layout>
      <div style={{ padding: '24px 24px 0' }}>
        <Modal
          // title="新闻详情"
          width={1000}
          visible={this.state.visible}
          footer={null}
          destroyOnClose={true}
          // onOk={this.handleOk}
          onCancel={this.onContentClose}
          style={{
            height: 'calc(90% - 10px)',
          }}
        />
        <div className={styles.homeContent}>
          {/* 左侧内容 */}
          <div className={styles.topLeftBox}>
            <Row gutter={16} className={styles.Row}>
              <Col className={styles.col} span={14}>
                <div className={styles.shadow} style={{ height: '430px' }}>
                  <div className="titleLine" onClick={showDetail}>
                    <div className="kk" />
                    风险预警
                  </div>
                  <div className={styles.contentScroll}>
                    {/* <div key="Hgyj">
                      {!HgyjData && HgyjData !== {} && (
                        <div style={{ display: 'inline-flex', marginBottom: '15px' }}>
                          <div className="ss" />
                          <span>合规预警</span>
                        </div>
                      )}
                    </div> */}

                    <div key="Jyyj">
                      {JyyjData && JyyjData !== {} && (
                        <div>
                          <div style={{ display: 'inline-flex', marginBottom: '15px' }}>
                            <div className="ss" />
                            <span>经营预警</span>
                          </div>
                          {renderJYYJ(JyyjData.data_list)}
                        </div>
                      )}
                    </div>

                    {/* <div key="Yqyj">
                      {YqyjData && YqyjData !== {} && (
                        <div>
                          <div style={{ display: 'inline-flex', marginBottom: '15px' }}>
                            <div className="ss" />
                            <span>舆情预警</span>
                          </div>
                          {renderYQYJ(YqyjData.data_list)}
                        </div>
                      )}
                    </div> */}
                  </div>
                </div>
              </Col>
              <Col className={styles.col} span={10}>
                <div className={styles.shadow} style={{ height: '430px' }}>
                  <div className="titleLine">
                    <div className="kk" />
                    企业发展评估
                  </div>
                  <div className={classNames(styles.content, styles.homeMiddleChartBox)}>
                    {/* <div id="charts" style={{ width: '100%', height: '280px', marginTop:'10px' }}></div> */}
                    <RadarChart
                      chartID={this.state.radarChartName}
                      // styles={this.state.radarChartStyle}
                    />
                  </div>
                </div>
              </Col>
            </Row>
            <Row gutter={16} className={styles.Row}>
              <Col className={styles.col} span={12}>
                <div className={styles.shadow} style={{ height: '380px' }}>
                  <div className="titleLine">
                    <div className="kk" />
                    舆情走势图（近一周）
                  </div>
                  <div className={styles.homeTopScendFlexBox}>
                    <DoubleLineChart chartID={this.state.evaluateWeekChartName} />
                  </div>
                </div>
              </Col>
              <Col className={styles.col} span={12}>
                <div className={styles.shadow} style={{ height: '380px' }}>
                  {/* <div className="titleLine">
                    <div className="kk" />
                    E互动
                  </div> */}
                  {/* <div className={styles.homeTopScendFlexBox}> */}
                  <LineBarChart chartID={this.state.eInteractionChartName} />
                  {/* </div> */}
                </div>
              </Col>
            </Row>
            <Row gutter={16} className={styles.Row}>
              <Col className={styles.col} span={12}>
                <div className={styles.shadow} style={{ height: '380px' }}>
                  <div className="titleLine">
                    <div className="kk" />
                    市值变动图
                  </div>
                  <div className={styles.homeTopScendFlexBox}>
                    <iframe
                      src="https://stockdata.cfbond.com/market_webapp/market/stockTrend.do?en_prod_code=000001.SZ"
                      frameBorder="0"
                      style={{ width: '100%', height: '310px' }}
                    />
                    {/* <LineChart chartID={this.state.valueChangeChartName} /> */}
                  </div>
                </div>
              </Col>
              <Col className={styles.col} span={12}>
                <div className={styles.shadow} style={{ height: '380px' }}>
                  <div className="titleLine">
                    <div className="kk" />
                    区域招商政策
                  </div>
                  {/* <Empty /> */}
                  <div className={styles.contentSecondScroll}>
                    <p>暂无招商政策</p>
                  </div>
                </div>
              </Col>
            </Row>
          </div>

          {/* 右侧列表 */}
          <div className={styles.topRightBox}>
            <Row gutter={16} className={styles.Row}>
              <Col className={styles.col} span={24}>
                <div
                  className={styles.shadow}
                  style={{ height: '1222px', background: '#fff', padding: '16px' }}
                >
                  <div className={styles.RightTitle}>{/* <p>服务中心</p> */}</div>
                  <Row gutter={16} className={styles.RightBox}>
                    <Col className={styles.col} span={12}>
                      <div className={styles.col_box}>
                        <img src={require('./images/fxpgbg.png')} />
                        <p className={styles.col_right_title}>风险评估报告</p>
                        <p className={styles.col_right_desc}>风险评估报告的简单说明</p>
                      </div>
                    </Col>
                    <Col className={styles.col} span={12}>
                      <div className={styles.col_box}>
                        <img src={require('./images/hydbjx.png')} />
                        <p className={styles.col_right_title}>行业对标解析</p>
                        <p className={styles.col_right_desc}>行业对标解析的简单说明</p>
                      </div>
                    </Col>
                  </Row>
                  <Row gutter={16} className={styles.RightBox}>
                    <Col className={styles.col} span={12}>
                      <div className={styles.col_box}>
                        <img src={require('./images/tzbgfx.png')} />
                        <p className={styles.col_right_title}>投资并购分析</p>
                        <p className={styles.col_right_desc}>投资并购分析的简单说明</p>
                      </div>
                    </Col>
                    <Col className={styles.col} span={12}>
                      <div className={styles.col_box}>
                        <img src={require('./images/ppcbpg.png')} />
                        <p className={styles.col_right_title}>品牌传播评估</p>
                        <p className={styles.col_right_desc}>品牌传播评估的简单说明</p>
                      </div>
                    </Col>
                  </Row>

                  <div className={styles.right_line} />

                  <div className={styles.RightBox}>
                    <div className={classNames(styles.right_col_full, styles.right_col_bg01)}>
                      <img src={require('./images/right_full_icon_01.png')} />
                      <div className={styles.right_full_text}>
                        <div className={styles.col_right_full_title}>市值管理服务</div>
                        <div className={styles.col_right_full_desc}>
                          这里是对市值管理服务的简单描述
                        </div>
                      </div>
                    </div>
                    <div className={classNames(styles.right_col_full, styles.right_col_bg02)}>
                      <img src={require('./images/right_full_icon_02.png')} />
                      <div className={styles.right_full_text}>
                        <div className={styles.col_right_full_title}>投资者关系服务</div>
                        <div className={styles.col_right_full_desc}>
                          这里是对投资者关系服务的简单描述
                        </div>
                      </div>
                    </div>
                    <div className={classNames(styles.right_col_full, styles.right_col_bg03)}>
                      <img src={require('./images/right_full_icon_03.png')} />
                      <div className={styles.right_full_text}>
                        <div className={styles.col_right_full_title}>媒体关系管理</div>
                        <div className={styles.col_right_full_desc}>
                          这里是对市值管理服务的简单描述
                        </div>
                      </div>
                    </div>
                    <div className={classNames(styles.right_col_full, styles.right_col_bg04)}>
                      <img src={require('./images/right_full_icon_04.png')} />
                      <div className={styles.right_full_text}>
                        <div className={styles.col_right_full_title}>舆情监测服务</div>
                        <div className={styles.col_right_full_desc}>
                          这里是对舆情监测服务的简单描述
                        </div>
                      </div>
                    </div>
                    <div className={classNames(styles.right_col_full, styles.right_col_bg05)}>
                      <img src={require('./images/right_full_icon_05.png')} />
                      <div className={styles.right_full_text}>
                        <div className={styles.col_right_full_title}>舆情应对服务</div>
                        <div className={styles.col_right_full_desc}>
                          这里是对舆情应对服务的简单描述
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </Col>
            </Row>
          </div>
        </div>

        {/* 视频资讯 */}
        <div className={classNames(styles.RowMargin, styles.shadow)}>
          <div className="titleLine">
            <div className="kk" />
            视频资讯
          </div>
          {videoSelcet.length > 0 && (
            <div className={styles.newBox}>
              <Drawer
                width={`80%`}
                placement="left"
                closable={true}
                onClose={this.closeVideoPage}
                visible={this.state.ViedoVisible}
              >
                <iframe
                  src={this.state.currentVideoUrl}
                  frameBorder="0"
                  style={{ width: '100%', height: '100vh' }}
                />
              </Drawer>
              <Row gutter={16}>
                <Col
                  className={classNames(styles.newsImg)}
                  span={9}
                  onClick={this.openVideoPage.bind(this, videoSelcet[0].original_url)}
                >
                  {/* <a href={videoSelcet[0].original_url} target="_blank"> */}
                  <img src={videoSelcet[0].image_url} style={{ height: 'calc(100% - 24)' }} />
                  <div className={styles.newTitle}>{videoSelcet[0].title}</div>
                  {/* </a> */}
                </Col>

                <Col className={styles.col} span={15}>
                  <Row gutter={16} className={styles.newRow}>
                    <Col
                      className={classNames(styles.newsImg)}
                      span={6}
                      onClick={this.openVideoPage.bind(this, videoSelcet[1].original_url)}
                    >
                      <img src={videoSelcet[1].image_url} />
                      <div className={styles.newTitle}>{videoSelcet[1].title}</div>
                    </Col>
                    <Col
                      className={classNames(styles.newsImg)}
                      span={6}
                      onClick={this.openVideoPage.bind(this, videoSelcet[2].original_url)}
                    >
                      <img src={videoSelcet[2].image_url} />
                      <div className={styles.newTitle}>{videoSelcet[2].title}</div>
                    </Col>
                    <Col
                      className={classNames(styles.newsImg)}
                      span={6}
                      onClick={this.openVideoPage.bind(this, videoSelcet[3].original_url)}
                    >
                      <img src={videoSelcet[3].image_url} />
                      <div className={styles.newTitle}>{videoSelcet[3].title}</div>
                    </Col>
                    <Col
                      className={classNames(styles.newsImg)}
                      span={6}
                      onClick={this.openVideoPage.bind(this, videoSelcet[4].original_url)}
                    >
                      <img src={videoSelcet[4].image_url} />
                      <div className={styles.newTitle}>{videoSelcet[4].title}</div>
                    </Col>
                  </Row>
                  <Row gutter={16}>
                    <Col
                      className={classNames(styles.newsImg)}
                      span={6}
                      onClick={this.openVideoPage.bind(this, videoSelcet[5].original_url)}
                    >
                      <img src={videoSelcet[5].image_url} />
                      <div className={styles.newTitle}>{videoSelcet[5].title}</div>
                    </Col>
                    <Col
                      className={classNames(styles.newsImg)}
                      span={6}
                      onClick={this.openVideoPage.bind(this, videoSelcet[6].original_url)}
                    >
                      <img src={videoSelcet[6].image_url} />
                      <div className={styles.newTitle}>{videoSelcet[6].title}</div>
                    </Col>
                    <Col
                      className={classNames(styles.newsImg)}
                      span={6}
                      onClick={this.openVideoPage.bind(this, videoSelcet[7].original_url)}
                    >
                      <img src={videoSelcet[7].image_url} />
                      <div className={styles.newTitle}>{videoSelcet[7].title}</div>
                    </Col>
                    <Col
                      className={classNames(styles.newsImg)}
                      span={6}
                      onClick={this.openVideoPage.bind(this, videoSelcet[8].original_url)}
                    >
                      <img src={videoSelcet[8].image_url} />
                      <div className={styles.newTitle}>{videoSelcet[8].title}</div>
                    </Col>
                  </Row>
                </Col>
              </Row>
            </div>
          )}
        </div>
      </div>
      // </Layout>
    );
  }
}
// export default Home;
const mapStateToProps = state => ({
  FSAbnormal: state.home.FSAbnormal,
  FinancialDataAbnormal: state.home.FinancialDataAbnormal,
  exoticIndexAbnormal: state.home.exoticIndexAbnormal,
  videoSelcet: Object.values(state.home.videoSelcet),
  JyyjData: state.home.JyyjData,
  HgyjData: state.home.HgyjData,
  YqyjData: state.home.YqyjData,
});
export default connect(mapStateToProps)(Home);
